<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{str1}}</p>
        <p>倒序排列</p>
        <!-- 复杂的功能，代码耦合度高 -->
        <!-- <p>{{str1.split('').reverse().join('')}}</p> -->
        <p>{{getReverseStr}}</p>
        <p>{{getReverseStr}}</p>
        <p>{{getReverseStr}}</p>
        <br>
        <p>{{getReverse()}}</p>
        <p>{{getReverse()}}</p>
        <p>{{getReverse()}}</p>
        <hr>
        <p>总金额：{{totalPrice}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                str1: 'hello-vue',
                cart: [
                    {name:'apple', price: '4', num: 3},
                    {name:'orange', price: '5', num: 2},
                    {name:'petch', price: '3', num: 10},
                ]
            },
            // 计算属性--computed,用来做计算的一个属性，功能是计算本质是属性，访问属性不带括号
            computed: {
                // 依赖缓存，当依赖（原始数据）没有变化的时候，会将计算结果缓存起来，下次使用时不在计算，直接读取内存的缓存
                // 计算过程复杂，需要反复使用这个数据时，就用计算属性
                getReverseStr() {
                    console.log('computed');
                    return this.str1.split('').reverse().join('')
                },
                totalPrice() {
                    let num = 0;
                    this.cart.forEach(item => {
                        num += item.price * item.num;
                    });
                    return '￥'+num.toFixed(2)+'元'
                }
            },
            methods: {
                // 调用几次就执行几次，哪怕结果相同
                getReverse() {
                    console.log('fn');
                    return this.str1.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>